<template>
  <div>
    <ul
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="isloading"
      infinite-scroll-distance="50"
      infinite-scroll-immediate-check="false"
    >
      <router-link
        tag="li"
        v-for="item of list"
        :key="item.id"
        :to="'/product/detail?product_id='+item.id"
      >
        <div>
          <img :src="item.image">
          <div>
            <div class="tit">{{item.product_name}}</div>
            <div class="price"><strong>￥ {{item.price}}</strong></div>
          </div>
        </div>
      </router-link>
    </ul>
    <p v-show="loading" class="page-loading">
      <mt-spinner type="fading-circle"></mt-spinner>
    </p>
  </div>
</template>

<script>
export default {
  name: 'productListView',
  data() {
    return {
      isScroll: false
    }
  },
  props: {
    list: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  activated() {
    this.isScroll = true
  },
  deactivated() {
    this.isScroll = false
  },
  computed: {
    isloading() {
      if (this.isScroll) {
        return this.loading
      } else {
        return true
      }
    }
  },
  methods: {
    loadMore() {
      this.setLoading(true)
    },
    setLoading(flag) {
      this.$emit('setLoading', flag)
    }
  }
}
</script>

<style lang="less" scoped>
@import "~styles/mixin.less";
ul{
  background: #fff;
  .padding(0,20);
  li>div{
    .padding(20,0);
    .flexwrap();
    img{
      .w(170);
      .h(170);
    }
    &>div{
      .flexcon();
      .pl(20);
      .tit{
        font-size:14px;
        .ellipsis2();
        .lh(42);
        .h(84);
      }
      .price{
        .lh(42);
        .mt(20);
        strong{
          .fs(32);
          color: #FF2F55;
          font-weight: 700;
        }
      }
    }
  }
}
.page-loading{
  text-align: center;
}
.page-loading /deep/ .mint-spinner-fading-circle{
  display: inline-block;
}
</style>
